<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12-vuex mutations-常量</title>
</head>
<body>
    <div id="app">
       <button @click="showStore">显示仓库内容</button>
        <h2>{{this.$store.state.num}}</h2>
        <button @click="add">加</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vuex/dist/vuex.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script>
        let INCREMENT ="increment";
        let store = new Vuex.Store({
            state:{
                num:8888,
            },
            mutations:{
                [INCREMENT]:function(state,{payload}){
                    state.num+=payload.count;
                }
            }
        })
        let vm = new Vue({
            store,
            el:"#app",
            methods: {
                showStore:function(){
                 console.log(this.$store);
                 
                    },
                add: function () {
                    // this.$store.state.counter +=1; 直接修改 不推荐
                    // 提交 commit 修改数据
                    // this.$store.commit("increment",10)
                    this.$store.commit({
                        type: INCREMENT,
                        payload: {
                            count: 10
                        }
                    })
                }

            },
        })
    </script>
</body>
</html>